<template>
  <div>
    <basic-container>
      <!-- <avue-form :option="option" v-model="form" @change="handleChange" @submit="handleSubmit"></avue-form> -->
      <!-- <avue-tabs
        :option="option"
        v-model="form"
        @submit="handleSubmit"
        @change="handleChange"
      ></avue-tabs> -->

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="个人信息" name="info">
          <template>
            <avue-form
              :option="option1"
              v-model="form"
              @change="handleChange"
              @submit="handleSubmit"
            >
              <template slot="menuForm">
                <el-button type="primary" size="small" @click="handleSubmit">
                  提交</el-button
                >
              </template>
            </avue-form>
          </template>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="pwd">
          <template>
            <avue-form
              :option="option2"
              v-model="form1"
              @change="handleChange"
              @submit="handleSubmit"
            >
              <template slot="menuForm">
                <el-button type="primary" size="small" @click="handleSubmit1">
                  修改</el-button
                >
              </template>
            </avue-form>
          </template>
        </el-tab-pane>
      </el-tabs>
    </basic-container>
  </div>
</template>

<script>
import { resetRouter } from "@/router/router";
import option from "@/const/user/info";
import { getUserInfo, update, updatePassword } from "@/api/system/user";
import { getUserInfoSso } from '@/api/system/user'
import { Loading } from "element-ui";
export default {
  data() {
    return {
      tabs: true,
      type: "info",
      activeName: "info",
      form: {},
      form1: {},
      option: {
        column: [
          {
            label: "个人信息",
            prop: "info",
            children: {
              submitText: "修改",
              column: [
                {
                  label: "头像",
                  type: "upload",
                  listType: "picture-img",
                  propsHttp: {
                    res: "data",
                    url: "link",
                  },
                  canvasOption: {
                    text: " ",
                    ratio: 0.1,
                  },
                  action: "/api/xpaas-resource/oss/endpoint/put-file",
                  tip: "只能上传jpg/png用户头像，且不超过500kb",
                  span: 12,
                  row: true,
                  prop: "avatar",
                },
                {
                  label: "姓名",
                  maxlength: 20,
                  overHidden: true,
                  span: 12,
                  row: true,
                  prop: "name",
                },
                {
                  label: "用户名",
                  maxlength: 20,
                  overHidden: true,
                  span: 12,
                  row: true,
                  prop: "realName",
                },
                {
                  label: "手机号",
                  maxlength: 11,
                  overHidden: true,
                  span: 12,
                  row: true,
                  prop: "phone",
                },
                {
                  label: "邮箱",
                  maxlength: 20,
                  overHidden: true,
                  prop: "email",
                  span: 12,
                  row: true,
                },
              ],
            },
          },
          {
            label: "修改密码",
            prop: "password",
            children: {
              submitText: "修改",
              column: [
                {
                  label: "原密码",
                  span: 12,
                  row: true,
                  type: "password",
                  prop: "oldPassword",
                },
                {
                  label: "新密码",
                  span: 12,
                  row: true,
                  type: "password",
                  prop: "newPassword",
                },
                {
                  label: "确认密码",
                  span: 12,
                  row: true,
                  type: "password",
                  prop: "newPassword1",
                },
              ],
            },
          },
        ],
      },
      option1: {
        submitBtn: false,
        column: [
          {
            label: "头像",
            type: "upload",
            listType: "picture-img",
            propsHttp: {
              res: "data",
              url: "link",
            },
            canvasOption: {
              text: " ",
              ratio: 0.1,
            },
            action: "/api/xpaas-resource/oss/endpoint/put-file",
            tip: "只能上传jpg/png用户头像，且不超过500kb",
            span: 12,
            row: true,
            prop: "avatar",
          },
          {
            label: "姓名",
            maxlength: 20,
            overHidden: true,
            span: 12,
            row: true,
            prop: "name",
          },
          {
            label: "用户名",
            maxlength: 20,
            overHidden: true,
            span: 12,
            row: true,
            prop: "realName",
          },
          {
            label: "手机号",
            maxlength: 11,
            overHidden: true,
            span: 12,
            row: true,
            prop: "phone",
          },
          {
            label: "邮箱",
            maxlength: 20,
            overHidden: true,
            prop: "email",
            span: 12,
            row: true,
          },
        ],
      },
      option2: {
        submitBtn: false,
        column: [
          {
            label: "原密码",
            span: 12,
            row: true,
            type: "password",
            prop: "oldPassword",
          },
          {
            label: "新密码",
            span: 12,
            row: true,
            type: "password",
            prop: "newPassword",
          },
          {
            label: "确认密码",
            span: 12,
            row: true,
            type: "password",
            prop: "newPassword1",
          },
        ],
      },
    };
  },
  computed: {
    option() {
      return {
        tabs: this.tabs,
        submitText: "修改",
        option1: option.option1,
        option2: option.option2,
      };
    },
  },
  created() {
    this.handleWitch();
  },
  mounted() {
    console.log(this.option, "111111111111");
  },
  methods: {
    handleSubmit() {
      //   if (this.type === "info") {
      update(this.form).then((res) => {
        getUserInfoSso()
          .then((ress) => {
            const data = ress.data.data;
            this.$store.commit("SET_USER_INFO", data);
            // resolve()
          })
          .catch((err) => {
            // reject(err)
          });
        if (res.data.success) {
          this.$message({
            type: "success",
            message: "修改信息成功!",
          });
        }
      });
      //   }
    },
    handleSubmit1() {
      let _this = this;
      updatePassword(
        this.form1.oldPassword,
        this.form1.newPassword,
        this.form1.newPassword1
      ).then((res) => {
        if (res.data.success) {
          this.$message({
            type: "success",
            message: "修改密码成功!",
          });
          setTimeout(function () {
            _this.$store.dispatch("FedLogOut").then(() => {
              resetRouter();
              window.location.href = window._CONFIG.ssoPrefixUrl + "/logout";
            });
          }, 3000);
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
          Loading();
        }
      });
    },
    // handleSubmit() {
    //   if (this.type === "info") {
    //     update(this.form).then((res) => {
    //       if (res.data.success) {
    //         this.$message({
    //           type: "success",
    //           message: "修改信息成功!",
    //         });
    //       } else {
    //         this.$message({
    //           type: "error",
    //           message: res.data.msg,
    //         });
    //       }
    //     });
    //   } else {
    //     updatePassword(
    //       this.form.oldPassword,
    //       this.form.newPassword,
    //       this.form.newPassword1
    //     ).then((res) => {
    //       if (res.data.success) {
    //         this.$message({
    //           type: "success",
    //           message: "修改密码成功!",
    //         });
    //       } else {
    //         this.$message({
    //           type: "error",
    //           message: res.data.msg,
    //         });
    //         Loading();
    //       }
    //     });
    //   }
    // },
    handleWitch() {
      if (this.type === "info") {
        getUserInfo().then((res) => {
          const user = res.data.data;
          this.form = {
            id: user.id,
            avatar: user.avatar,
            name: user.name,
            realName: user.realName,
            phone: user.phone,
            email: user.email,
            deptId: user.deptId,
          };
        });
      }
    },
    handleChange(item) {
      this.type = item.prop;
      this.handleWitch();
    },
  },
};
</script>

<style scoped>
</style>
